<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirm-loading="confirmLoading"
    cancel-text="关闭"
    @ok="submit"
    @cancel="closeModal"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item  :label-col="labelCol" :wrapper-col="wrapperCol" label="菜单类型" >
          <a-radio-group v-model="model.type" >
            <a-radio-button :value="0">目录</a-radio-button>
            <a-radio-button :value="1">菜单</a-radio-button>
            <a-radio-button :value="2">按钮</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="按钮名称" v-show="model.type === 2">
          <a-input v-decorator="['title', {initialValue: null } ]" placeholder="请输入按钮名称" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="菜单图标" v-show="model.type === 0||model.type === 1">
          <a-popover title="请选择图标" trigger="click" >
            <template slot="content">
              <icon-select ref="iconSelect" @selected="selected" style="width:500px"/>
            </template>
            <a-input type="primary" placeholder="点击选择图标" v-model="model.icon">
              <svg-icon v-if="model.icon" slot="prefix" :icon-class="model.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
              <a-icon v-else slot="prefix" type="paper-clip" style="color:#999"/>
            </a-input>
          </a-popover>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="外链菜单" v-show="model.type === 0||model.type === 1">
          <a-radio-group v-decorator="['iframe', {initialValue: false } ]" >
            <a-radio-button :value="false">否</a-radio-button>
            <a-radio-button :value="true">是</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="菜单标题" v-show="model.type === 0||model.type === 1">
          <a-input v-decorator="['title', validatorRules.title ]" placeholder="请输入菜单标题" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="路由地址" v-show="model.type === 0||model.type === 1">
          <a-input v-decorator="['route', {initialValue: null } ]" placeholder="请输入路由地址" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="菜单排序" v-show="model.type === 0||model.type === 1||model.type === 2">
          <a-input-number
            v-decorator="['sort', validatorRules.sort ]"
            placeholder="请输入部门排序"
            :min="1"
            :max="999"
            style="width: 200px"
          />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="权限标识" v-show="model.type === 1||model.type === 2">
          <a-input v-decorator="['permission', {initialValue: null } ]" placeholder="请输入权限标识" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="组件名称" v-show="model.type === 1">
          <a-input v-decorator="['componentName', {initialValue: null } ]" placeholder="请输入组件名称" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="组件路径" v-show="model.type === 1">
          <a-input v-decorator="['component', {initialValue: null } ]" placeholder="请输入组件路径" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否默认分配" v-show="model.type === 0||model.type === 1||model.type === 2">
          <a-radio-group v-decorator="['assignWay', {initialValue: 1 } ]" >
            <a-radio-button :value="1">自动分配</a-radio-button>
            <a-radio-button :value="2">手动分配</a-radio-button>
            <a-radio-button :value="3">不分配</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="归属平台" v-show="model.type === 0||model.type === 1||model.type === 2">
          <a-radio-group v-decorator="['belong', {initialValue: 1 } ]" @change="belongChange">
            <a-radio-button :value="1">运营平台</a-radio-button>
            <a-radio-button :value="2">商家平台</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="上级类目" v-show="model.type === 1||model.type === 2">
          <treeselect
            v-model="model.pid"
            :loadOptions="loadDepts"
            :options="menus"
            placeholder="选择上级类目"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import IconSelect from '@/components/IconSelect';
import Treeselect from '@riophae/vue-treeselect';
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import ApiTree from '@/api/system/menu';
import { Slime } from '@/mixins/slime';
export default {
  name: 'MenuUpdate',
  components: { Treeselect, IconSelect },
  data() {
    return {
      title: '编辑',
      type: 0, // 0 添加 1 编辑
      belong: 1, //1 运营平台 2商家平台
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {
        id:null,
        pid:0,
        icon:'',
        type:0, 
      },
      id: null,
      menus: [],
      validatorRules: {
        title: { rules: [{ required: true, message: '请输入菜单标题!' }] },
        sort: { rules: [{ required: true, message: '请输入商品部门排序!' }], initialValue: 99 },
      },
    };
  },
  mixins: [Slime],
  methods: {
    // 增
    crudCreate() {
      this.visible = true;
      this.type = 0;
      this.getDepts(1);
    },
    // 改
    crudUpdate(data) {
      this.visible = true;
      this.type = 1;
      this.getDepts(data.belong);
      this.belong = data.belong
      this.$nextTick(() => {
        this.form.setFieldsValue({
          title: data.title,
          iframe:false,
          route:data.route,
          sort: data.sort,
          permission: data.permission,
          componentName: data.componentName,
          component: data.component,
          belong: data.belong,
          assignWay: data.assignWay, //1 自动分配、2 手动分配、3 不分配
        });
      });
      this.model = {
        id:data.id,
        pid:data.pid,
        icon:data.icon,
        type:data.type,
      };
    },
    // 弹窗-获取部门信息
    getDepts(belong) {
      ApiTree.getMenusTree(0, belong).then((res) => {
        this.menus = res.result.map(function (obj) {
          obj = { ...obj, label: obj.title };
          if (obj.subCount > 0) {
            obj.children = null;
          }
          return obj;
        });
      });
    },
    // 弹窗-获取下一级的部门菜单
    getSupDepts(id) {
      ApiTree.getMenusSuperior(id).then((res) => {
        const data = res.result;
        const children = data.map(function (obj) {
          if (!obj.leaf && !obj.children) {
            obj.children = null;
          }
          obj = { ...obj, label: obj.title };
          return obj;
        });
        this.menus = [{ id: 0, label: '顶级类目', children: children }];
      });
    },
    // 弹窗-树状图内部门数据
    loadDepts({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        ApiTree.getMenusTree(parentNode.id, this.belong).then((res) => {
          parentNode.children = res.result.map(function (obj) {
            if (obj.subCount > 0) {
              obj.children = null;
            }
            obj = { ...obj, label: obj.title };
            return obj;
          });
          setTimeout(() => {
            callback();
          }, 100);
        });
      }
    },
    // 提交
    submit() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          const param = {...values, ...that.model };  //belong 1 运营平台、2 商家平台
          if (that.type === 0) {
            that.submitCreate(param);
          } else {
            that.submitUpdate(param);
          }
        }
      });
    },
    // 提交 增
    submitCreate(param) {
      const that = this;
      ApiTree
        .create(param)
        .then((res) => {
          that.$message.success('新增成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 提交 改
    submitUpdate(param) {
      const that = this;
      ApiTree
        .update(param)
        .then((res) => {
          that.$message.success('编辑成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 弹窗-关闭
    closeModal() {
      this.confirmLoading = false;
      this.visible = false;
      this.form.resetFields()
      this.$emit('closeModal');
    },
    // 选中图标
    selected(name) {
      this.model.icon = name
    },
    //平台改变
    belongChange(e){
      this.getDepts(e.target.value)
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
